<template>
  <div>
    <div class="mymusic">
      <el-container style="height: calc(100vh - 75px); border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu default-active="1" @select="handleSelect">
            <el-menu-item index="1">我收藏的音乐</el-menu-item>
            <el-menu-item index="2">推荐的音乐</el-menu-item>
          </el-menu>
        </el-aside>

        <el-main v-if="currentIdx == 1">
          <div>
            <img :src="userInfo.avatar" />
            <div class="reight">
              <p style="font-size: 30px; padding-top: 15px">我收藏的音乐</p>
              <p style="font-size: 20px; padding-top: 15px">{{ userInfo.name }}</p>
              <el-row style="padding-top: 15px">
                <!-- <el-button type="primary" icon="el-icon-video-play">播放</el-button> -->
                <!-- <el-button type="success" icon="el-icon-folder-add" disabled>收藏</el-button> -->
              </el-row>
            </div>
          </div>
          <div class="list">
            <p class="title">歌曲列表</p>
            <el-table :data="collects" style="width: 100%" stripe>
              <el-table-column type="index" label="序号" width="60"></el-table-column>
              <el-table-column prop="song.songName" label="歌曲标题"></el-table-column>
              <el-table-column prop="song.duration" label="时长"></el-table-column>
              <el-table-column prop="song.composer" label="歌手"></el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button icon="el-icon-video-play" size="mini" circle @click="toSong(scope.row.songId, scope.row.song.songName)"></el-button>
                  <!-- <el-button icon="el-icon-folder-add" size="mini" circle disabled></el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>

        <div class="recommend-music" v-else>
          <div class="list">
            <p class="title">歌曲列表</p>
            <el-table :data="recommendList" style="width: 100%" stripe>
              <el-table-column type="index" label="序号" width="60"></el-table-column>
              <el-table-column prop="songName" label="歌曲标题"></el-table-column>
              <el-table-column prop="duration" label="时长"></el-table-column>
              <el-table-column prop="composer" label="歌手"></el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button icon="el-icon-video-play" size="mini" circle @click="toSong(scope.row.id, scope.row.songName)"></el-button>
                  <el-button icon="el-icon-folder-add" size="mini" circle :disabled="token && scope.row.isRc" @click="setRecommend(scope.row.id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-container>
    </div>
  </div>
</template>

<script>
import { req, API_COLLECT_FINDBYID, API_COLLECT_ADD } from '@/api/api'
import { reqSongList } from '@/api/index'
export default {
  data() {
    return {
      currentIdx: 1,
      collects: [],
      recommendList: []
    }
  },
  created() {
    this.getCollects()
  },
  methods: {
    setRecommend(songId) {
      req.addOrUpdate(API_COLLECT_ADD, { userId: this.userInfo.id, songId}).then(res => {
        this.$message.success('收藏成功')
        this.getCollects()
        this.getRecommend()
      })
    },
    getCollects() {
      req.list(API_COLLECT_FINDBYID, { value: this.userInfo.id }).then(res => {
        this.collects = res.rows
      })
    },
    getRecommend() {
      reqSongList().then(res => {
        res.rows.forEach(item => {
          item.isRc = false
        })
        res.rows.forEach(item => {
          for(let i=0; i<this.collects.length; i++) {
            if(item.id === this.collects[i].songId) {
              item.isRc = true
              i = this.collects.length
            }
          }
        })
        this.recommendList = res.rows
      })
    },
    toSong(id, songName) {
      this.$router.push({
        path: `/song/${id}/${songName}`
      })
    },
    handleSelect(key) {
      this.currentIdx = key
      if(key == 1) {
        this.getCollects()
      } else {
        this.getRecommend()
      }
    }
  },
  computed: {
    token() {
      return this.$store.state.user.token
    },
    userInfo() {
      return this.$store.state.user.userInfo
    }
  }
};
</script>

<style scoped lang="less">
.mymusic {
  width: 60vw;
  margin: 0 auto;
}

.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 300px;
}

.el-table .cell {
  cursor: pointer;
}

.el-aside {
  color: #333;
}

img {
  width: 150px;
  height: 150px;
  padding-left: 20px
}

.reight {
  float: right;
  width: 32.5vw;
}

.list {
  width: 45vw;
  padding-top: 18px;
  font-size: 20px;
  .title {
    padding: 0 0 5px 20px;
    border-bottom: 2px solid #c20c0c;
  }
}
.recommend-music {
  padding: 20px;
}
</style>